<template>
  <view class="contain qxlj_back4">
    <view class="topMenu">
      <view class="kefu commonBox" @click="callNumber()">
        <view class="common_text">
          <view>联系客服</view>
          <view>Contact customer service</view>
        </view>
      </view>
      <view class="complaint commonBox" @click="navToNew()">
        <view class="common_text">
          <view>投诉建议</view>
          <view>Complaints and suggestions</view>
        </view>
      </view>
    </view>
    <!--    <view class="menuItem" v-for="(item,index) in list" :key="index">-->
    <!--      <view class="title" @click="navTo(item.Id)">-->
    <!--        <image src="../../static/img/help2.png" mode="widthFix"></image>-->
    <!--        <text>{{item.Title}}</text>-->
    <!--      </view>-->
    <!--      <view class="checkMsg" @click="navTo(item.Id)">-->
    <!--        <view class="left">-->
    <!--          &lt;!&ndash; <image src="../../static/static/guanyu1.png" mode="widthFix"></image> &ndash;&gt;-->
    <!--          &lt;!&ndash; <text>查看详情</text> &ndash;&gt;-->
    <!--        </view>-->
    <!--        <view class="right">-->
    <!--          <text>查看详情</text>-->
    <!--          <image src="../../static/img/reback.png" mode="widthFix"></image>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <view class="line"></view>-->
    <!--    </view>-->
  </view>
</template>

<script>
import {
  getChildren,
  getHomeMsg, useSiteDataApi
} from '@/api/homePage.js';
import Config from '@/config/index.js';
export default {
  data() {
    return {
      list: [],
      phone: ""
    }
  },
  methods: {
    async getMsg() {
      uni.showLoading({})
      try {
        const {
          Data
        } = await getChildren({
          ArticleCategoryId: Config.site.help_id,
          Index: 1,
          Size: 10,
        });
        uni.hideLoading()
        console.log(Data, Config.site.help_id)
        this.list = Data;
      } catch (e) {
        //TODO handle the exception
      }
    },
    navTo() {
      uni.navigateTo({
        url: '/pages/article/index?id=' + 4785+'&readOnly=true'
      })
    },
    navToNew() {
      console.log(123)
      uni.navigateTo({
        url: '/mall_subpages/productList/complaint'
      })
    },
    async getMenuList() {
      try {
        const {Data} = await useSiteDataApi(3384);
        Data.forEach((item, index) => {
          if (item.Id === 3636) {
            this.phone = item.LinkUrl
          }
        })
      } catch (e) {
        //TODO handle the exception
      }
    },
    callNumber() {
      uni.makePhoneCall({
        phoneNumber: this.phone,
        success: (result) => {},
        fail: () => {},
        complete: () => {}
      });
    }
  },
  onLoad() {
    this.getMsg();
    this.getMenuList();
  }
}
</script>

<style lang="scss" scoped>
.contain {
  width: 100%;
  min-height: 100vh;
  padding: 2%;

  .topMenu {
    padding: 40rpx 20rpx 20rpx;
    display: flex;
    justify-content: space-between;

    .commonBox {
      width: 330rpx;
      height: 130rpx;
      border-radius: 10rpx;
      background-color: #498FFF;
      padding: 26rpx;
      display: flex;
      justify-content: space-around;

      image {
        width: 78rpx;
        height: 78rpx;
      }

      .common_text {
        width: 100%;
        text-align: center;
        padding-top: 10rpx;
        color: #fff;

        view:nth-child(1) {
          font-weight: 600;
          font-size: 34rpx;
        }

        view:nth-child(2) {
          font-size: 8rpx;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  .menuItem {
    width: 100%;
    height: 190rpx;

    // background-color: #fff;
    .line {
      border-top: 4rpx dotted #ccc;
      width: 95%;
      margin: 0 auto;
    }

    .title {
      height: 120rpx;
      padding: 0 40rpx 0 40rpx;
      color: #666;
      display: flex;
      align-items: center;

      text {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; //文本一行显示
        -webkit-box-orient: vertical;
        font-weight: 600;
        font-size: 30rpx;
      }

      image {
        width: 35rpx;
        height: 54rpx;
        margin-right: 20rpx;
      }
    }

    .checkMsg {
      color: #999;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;
      }

      image {
        margin: 0 10rpx;
      }

      .right {
        padding: 0 0 30rpx 0;
        display: flex;
        font-size: 26rpx;
        align-items: center;

        image {
          width: 20rpx;
          height: 20rpx;
          margin-top: 5rpx;
        }
      }
    }
  }
}
</style>